<template>
	<view class="comment">
		<!-- 填写我的评论 -->
		<view class="user-comment">
			<view class="name-head">我的评论：</view>
			<view class="input-publish">
				<view class="image-text">
					<textarea class="input-textarea" :maxlength="140" v-model.trim="value" placeholder="请输入评论" />
					<uni-file-picker ref="filepicker" limit="9" @select="fileSelect" @delete="fileDelete"
						style="background: #fafafa;" file-mediatype="image" file-extname="png,jpg">
						<uni-icons type="plusempty" size="50" color="#ff7034"></uni-icons>
					</uni-file-picker>
					<view class="numberNine">
						<text>最多只能上传</text>
						<text class="redLength" v-if="filelength>0">{{filelength}}</text>
						<text v-if="filelength>0">/</text>
						<text>9</text>
						<text>张</text>
					</view>
				</view>
				<view class="button-text" @click="clickPublish">发表</view>
			</view>
		</view>
		<!-- 评论内容 -->
		<view class="user-comment">
			<view class="name-head">评论内容：</view>
			<view class="comment-content">
				<view class="content-flex" v-for="(item,index) in mentList" :key="item.id"
					:class="[item.createBy == codeown?'content-flex-active':'']">
					<fileImage :src="item.headUrl" defaultImg="/static/userInfoIco.svg"
						:class="[item.createBy == codeown?'content-image':'content-image-active']"
						:className="['avatarImage']" />
					<view class="content-text">
						<view class="name-text">
							<text>{{ item.userName }}</text>
							<view class="commentCompany">
								<text>{{item.userCompany || ''}}</text>
							</view>
						</view>
						<view class="info-text">{{ item.content || '' }}</view>
						<view class="image-text-filePath">
							<view v-for="code in item.attchments" :key="code.id" @click="previewImage(item)">
								<fileImage :src="code.filePath" :className="['in-cidental']" />
							</view>
						</view>
						<view class="delete">
							<text>{{ item.createTime }}</text>
							<!-- 点击删除 -->
							<view class="deleteIons" @click="toggle(item,index)" v-if="item.createBy == codeown">
								<uni-icons type="trash" size="27" color="#D5D6DB" />
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="no-content-text" v-show="mentShow">
				没有更多评论了
			</view>
		</view>
		<!-- 删除确定-->
		<uni-popup ref="popup" type="center">
			<view class="toggleAmed">
				<h3>是否删除评论</h3>
				<view class="ameedBtn">
					<view @click="toggleA">取消</view>
					<view class="sure" @click="deleteMent">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		debounce,
		showLoading
	} from '@/config/debounce.js'
	import {
		AllMethodFile
	} from '../../../config/method.js'
	import {
		timeSplice
	} from '../../../config/CurrentRouter.js'
	import {
		mapState
	} from 'vuex';
	import fileImage from '@/components/fileImage/fileImage.vue'
	import {
		Desensitized
	} from '../../../config/desensitization.js'
	export default {
		data() {
			return {
				filelength: '', //照片数
				mentShow: false, // 判断当前评论是否有数据
				codeown: '', // 当前用户的ID
				value: '',
				passData: {}, //需要传递的数据
				fileList: [], // 图片二进制数据
				mentList: [], // 评论数据
				parameter: {}, //参数
				limitLoad: false // 防止重复加载
			}
		},
		components: {
			fileImage
		},
		computed: {
			...mapState(['userInfo'])
		},
		onLoad(option) {
			console.log(option, this.userInfo.name)
			this.codeown = this.userInfo.id
			this.parameter = option
			this.comMentDateil()
		},
		methods: {
			/**
			 * 时间： 2022/7/27，An
			 * 功能： 获取项目评论
			 * 接口:  '/api/Project/GetProjectComment'，
			 * 参数： 'PrjInfoId'-->详情id
			 */
			comMentDateil() {
				// this.parameter.PrjInfoId
				this.$http.get(`api/Project/GetProjectComment?prjInfoId=${this.parameter.PrjInfoId}`).then((res) => {
					// console.log(res)
					if (Array.isArray(res)) {
						res = res.map(code => {
							return {
								...code,
								createTime: timeSplice(code.createTime || ''),
								userName: Desensitized.desensitizedName(code.userName || ''),
								userCompany: Desensitized.desensitizedAddr(code.userCompany || '').slice(0,
									6)
							}
						})
						this.mentList = res
						this.mentShow = res.length <= 0 ? true : false
					}
				})
			},
			/**
			 * 时间： 2022/7/27，An
			 * 功能： 获取项目评论
			 * 接口:  'api/Project/AddProjectComment'，
			 * 参数： PrjInfoId-->详情id,PrjInfoCode-->详情编码，Content-->评论内容,Source-->来源 1 客户端 2 服务端,companyName-->当前企业名称
			 * 		file二进制文件（key=files)
			 */
			clickPublish() {
				showLoading({
					mask: true
				})
				if (!this.value) {
					uni.showToast({
						title: '请填写你的评论',
						icon: 'none'
					})
				} else if (!this.value || this.fileList.length == 0) {

					this.$http.post('api/Project/AddProjectComment_Json', {
						...this.parameter,
						Content: this.value,
						CompanyName: this.userInfo.corpName,
						UserName: this.userInfo.name,
						Source: '1'
					}).then(err => {
						console.log('==============', err);
						if (err == true) {
							this.limitLoad = false
							uni.hideLoading();
							this.filelength = 0;
							uni.showToast({
								title: '评论成功！',
								icon: 'none'
							})
							this.init()
							this.comMentDateil()
						}

					}).catch(err => {
						this.limitLoad = false
						uni.hideLoading();
						console.log(err)
						uni.showToast({
							title: '评论失败！',
							icon: 'none'
						})
					})
				} else if (!this.value || this.fileList.length >= 0) {
					this.commentFolle();
				}
			},
			/**
			 * 时间： 2022/7/27，An
			 * 功能： 删除当期用户评论
			 * 接口:  'api/Project/DeleteProjectComment'，
			 * 参数： 'id'-->评论id
			 */
			deleteMent() {
				const {
					id,
					index
				} = this.passData;
				// console.log('删除评论显示item,index', item, index);
				this.$http.get(`api/Project/DeleteProjectComment?id=${id}`).then((res) => {
					if (res == null) {
						this.mentList.splice(index, 1)
						this.mentShow = this.mentList.length <= 0 ? true : false
						this.$refs.popup.close('center')
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
					}
				})
			},
			// 预览图片 
			previewImage(item) {
				console.log(item)
				let list = item.attchments.map(code => code.filePath)
				if (!Array.isArray(list) || list.length <= 0) {
					uni.showToast({
						title: '没有图片',
						icon: 'none'
					})
					return
				}
				uni.previewImage({
					urls: list
				})
			},
			// 选择图片的回调
			fileSelect(e) {
				if (Array.isArray(e.tempFiles) && e.tempFiles.length <= 0) return
				let file = e.tempFiles.map((code, index) => {
					return {
						...code,
						name: 'file' + index + this.filelength, //需要加index标记，否则，uniapp不支持同名文件参数
						uri: code.url, // 解决App上传不成功问题
					}
				})
				// 二进制文件key
				this.fileList = this.fileList.concat(file);
				this.filelength = this.fileList.length;
			},
			// 删除图片的时候
			fileDelete(e) {
				console.log(e)
				let index = this.fileList.findIndex(item => item.path == e.tempFilePath)
				this.fileList.splice(index, 1)
				this.filelength = this.fileList.length;
				console.log(this.filelength)
			},
			// 初始化数据
			init() {
				this.value = ''
				this.fileList = []
				this.$refs.filepicker.files = []
				this.$refs.filepicker.filesLIst = []
			},
			// 点击弹出弹窗
			toggle(item, index) {
				this.passData = {
					id: item.id,
					index
				}
				// console.log('---------------', this.passData);
				this.$refs.popup.open('center')
			},
			// 点击取消关闭弹出框
			toggleA() {
				this.$refs.popup.close('center')
			},
			// 上传文件方法
			commentFolle() {
				AllMethodFile({
					fileShow: false,
					file: this.fileList,
					fileUrl: 'api/Project/AddProjectComment',
					parameter: {
						...this.parameter,
						Content: this.value,
						CompanyName: this.userInfo.corpName,
						Source: '1'
					},
				}).then(res => {
					if (res.code == 200) {
						this.filelength = 0;
						uni.showToast({
							title: '评论成功！',
							icon: 'none'
						})
						this.init()
						this.comMentDateil()
					}

				}).catch(err => {
					console.log(err)
					uni.showToast({
						title: '评论失败！',
						icon: 'none'
					})
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.comment {
		margin: 10rpx 20rpx;
		background-color: #fff;

		.user-comment {
			padding: 10rpx 30rpx 30rpx 30rpx;

			.name-head {
				margin-bottom: 10rpx;
			}

			.no-content-text {
				text-align: center;
				color: #cbcbd3;
			}
		}

		.user-comment+.user-comment {
			border-top: 2rpx solid #f5faf5;
		}

		.input-publish {
			display: flex;
			align-items: flex-end;

			.image-text {
				width: 80%;
				background-color: #f7f7f7;
				border-radius: 10rpx;
				padding: 20rpx;
			}

			.button-text {
				margin-left: 20rpx;
				color: #b5001e;
				cursor: pointer;
			}
		}

		.input-textarea {
			width: 100%;
			height: 180rpx;
		}

		.image-text-filePath {
			display: flex;
			overflow-x: auto;
		}

		.comment-content {
			.content-flex {
				display: flex;
				position: relative;
				padding: 10rpx 0;

				.comment-image {
					width: 94rpx;
					height: 94rpx;
					border-radius: 94rpx;
				}

				.content-text {
					font-size: 34rpx;
					width: 80%;

					.name-text {
						width: 440rpx;
						color: #4975aa;
						display: flex;
						justify-content: space-between;
						font-size: 28rpx;
						// background-color: aqua;

						.commentCompany {
							// background-color: cadetblue;
							width: 60%;
							// text-align: center;
							white-space: nowrap;
							overflow: hidden;
							// text-overflow: ellipsis;
						}
					}

					.info-text {
						margin: 5rpx 0 16rpx 0;
					}

					.time-text {
						color: #cbcbd3;
						font-size: 26rpx;
					}

					.delete {
						color: #cbcbd3;
						font-size: 26rpx;
						display: flex;

						.deleteIons {
							margin-left: auto;
						}
					}
				}

				.content-image {
					margin-left: 10rpx;
				}

				.content-image-active {
					margin-right: 10rpx;
				}

				.button-dele {
					position: absolute;
					left: 10%;
					bottom: 30rpx;
				}
			}

			.content-flex+.content-flex {
				border-top: 4rpx solid #fafae2;
			}

			.content-flex-active {
				flex-direction: row-reverse;

				.content-text {
					width: 68%;
				}
			}
		}
	}

	// 底部弹窗
	.toggleAmed {
		margin: auto;
		width: 500rpx;
		height: 250rpx;
		background-color: #ffffff;
		border-radius: 30rpx;
		box-shadow: 5px 5px 10px 5px #ccc;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;
	}

	.ameedBtn {
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.ameedBtn>view {
		width: 150rpx;
		height: 82rpx;
		line-height: 82rpx;
		border-radius: 182rpx;
		text-align: center;

	}

	.ameedBtn>view:nth-child(1) {
		background-color: #F5F5f5;

	}

	.sure {
		background-color: #9E001A;
		color: #ffffff;
	}

	.numberNine {
		width: 200px;
		font-size: 26rpx;
		line-height: 30px;

		>text:not(:first-child) {
			margin-left: 10px;
		}

		.redLength {
			font-size: 30rpx;
			color: #9E001A;
		}
	}
</style>
<style lang="scss">
	.comment {
		.in-cidental {
			width: 150rpx;
			height: 150rpx;
			margin-right: 10rpx;
			border-radius: 10rpx;
		}

		.avatarImage {
			width: 94rpx;
			height: 94rpx;
			border-radius: 94rpx;
		}
	}
</style>